<template>
    <div class="message-list settle-sub-box">
        <div class="cont">
            <div class="list" v-for="(item,index) in notices" :key="index">
                <div class="head">
                    <div class="state" :class="{visit: item.type==2}">{{item.type==1 ? '陪护关联' : '探视申请'}}</div>
                    <div class="name">{{item.messageContent}}</div>
                </div>
                <div class="visit-time" v-if="item.type==2">探视时间：{{item.visitTime}}</div>
                <div class="info clearfix">
                    <div class="links">
                        <el-link class="link" :underline="false" @click="operation(1,item)"
                                 v-if="item.result==0&&item.handlePower==1">拒绝
                        </el-link>
                        <el-link class="link agree" :underline="false" @click="operation(2,item)"
                                 v-if="item.result==0&&item.handlePower==1">
                            同意
                        </el-link>
                        <span v-if="item.result==2">已同意</span>
                        <span v-if="item.result==1">已拒绝</span>
                    </div>
                    <template>
                        <div class="time">{{item.createTime}}</div>
                    </template>
                    <div class="reason" v-if="item.reason">{{item.reason}}</div>
                </div>
            </div>
            <infinite-loading @infinite="infiniteHandler" :identifier="infiniteId" spinner="spiral" :distance="100">
                <div slot="no-more"></div>
                <!--                <div slot="no-more" class="noMore">没有更多记录了</div>-->
                <div slot="no-results"></div>
                <!--                <div slot="no-results" class="empty">暂无预约记录</div>-->
                <div slot="error" slot-scope="{ trigger }">
                    <!--                    Error message, click <a href="javascript:;" @click="trigger">here</a> to retry-->
                </div>
            </infinite-loading>
            <div class="empty" v-if="!notices[0]">暂无消息</div>
        </div>
        <confirm v-model="showConfirm" confirm-text="确定" cancel-text="取消" class="apply-confirm"
                 @on-confirm="submit()" @on-cancel="cancel()" :title="'拒绝原因'"
                 :close-on-confirm="false">
            <div class="info">
                <x-textarea :max="50" v-model="reason" :placeholder="'请输入拒绝原因，50字以内'"
                            @on-blur="$method.inputBlur()"></x-textarea>
            </div>
        </confirm>
    </div>
</template>

<script>
    import {Confirm, XTextarea} from 'vux'

    export default {
        data() {
            return {
                notices: [],
                index: 1,
                showConfirm: false,
                current: null,
                reason: '',
                infiniteId: +new Date()
            }
        },
        mounted() {
            this.$emit('footerHide')
        },
        methods: {
            infiniteHandler($state) {
                this.$http.get('/personData/getMyAllNotice', {
                    size: 10,
                    current: this.index || 1
                }).then(result => {
                    if (result.success) {
                        this.notices.push(...result.data.records)
                        if (result.data.pages <= result.data.current) {
                            $state.loaded()
                            $state.complete()
                        } else {
                            this.index += 1
                            $state.loaded()
                        }
                    } else {
                        $state.loaded()
                        $state.complete()
                    }
                }).catch(() => {
                    $state.error()
                })
            },
            changeLoading() {
                this.index = 1
                this.notices = []
                this.infiniteId += 1
            },
            operation(type, item) {
                // type 2同意、1拒绝
                let _this = this
                if (type === 2) {
                    let message = '是否同意' + (item.type === 1 ? '陪护关联申请' : '探视申请')
                    this.$vux.confirm.show({
                        content: message,
                        onConfirm() {
                            _this.$http.post('/personData/updateData', {
                                id: item.id,
                                result: type
                            }).then(result => {
                                if (result.success) {
                                    _this.changeLoading()
                                }
                            })
                        }
                    })
                } else {
                    this.current = item
                    this.showConfirm = true
                }
            },
            submit() {
                this.$http.post('/personData/updateData', {
                    id: this.current.id,
                    result: 1,
                    reason: this.reason
                }).then(result => {
                    if (result.success) {
                        this.changeLoading()
                        this.cancel()
                    }
                })
            },
            cancel() {
                this.showConfirm = false
                this.reason = ''
            }
        },
        components: {
            Confirm,
            XTextarea
        }
    }
</script>

<style scoped lang="less">
    .message-list {
        background-color: #FBFBFB;
    }

    .cont {
        padding: .3rem;
        height: 100%;
    }

    .list {
        box-shadow: 0 0 5px -1px rgba(0, 0, 0, .1);
        border-radius: 3px;
        margin-bottom: .2rem;
        background-color: #fff;
        padding: 0 .15rem;

        .head {
            display: flex;
            align-items: center;
            line-height: 1;
            padding: .15rem 0;
            font-size: .26rem;

            .state {
                padding: .06rem .1rem;
                color: #43CBB6;
                border-radius: .08rem;
                margin-right: .1rem;
                font-size: .2rem;
                text-align: center;
                border: 1px solid #43CBB6;
                min-width: 1.1rem;

                &.visit {
                    color: #427BE0;
                    border-color: #427BE0;
                }
            }

            .name {
                font-weight: bolder;
                margin-left: .1rem;

            }
        }

        .visit-time {
            color: #999;
            padding-bottom: .05rem;
            font-size: 0.26rem;
        }

        .info {
            padding: .15rem 0;
            border-top: 1px dashed #eee;

            .time {
                color: #999;
                font-size: 0.24rem;
            }

            .links {
                float: right;

                .link {
                    color: #333;
                    padding: 0 .2rem;

                    &:hover {
                        color: #333;
                    }

                    &.agree {
                        color: #427BE0;
                    }
                }

                span {
                    color: #999;
                }
            }

            .reason {
                margin-top: .1rem;
                background-color: #f5f5f5;
                padding: .1rem .2rem;
                color: #7b7b7b;
            }
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    .empty {
        text-align: center;
        padding-top: .5rem;
        color: #999;
    }

    /deep/ .apply-confirm {
        .info {
            border: 1px solid #eee;

            .vux-x-textarea {
                padding: .15rem;
            }
        }
    }
</style>
